UI

1. listview inside another listview

1. main.dart

import 'package:b/facebook_home_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: GoogleFonts.hedvigLettersSansTextTheme(),
      ),
      home: const FacebookHomePage(),
    );
  }
}

facebook_home_page.dart

import 'package:b/Model/model.dart';
import 'package:flutter/material.dart';

class FacebookHomePage extends StatefulWidget {
  const FacebookHomePage({super.key});

  @override
  _FacebookHomePageState createState() => _FacebookHomePageState();
}

class _FacebookHomePageState extends State<FacebookHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView(
          children: [
            Container(
              height: 100,
              padding: const EdgeInsets.only(right: 20, left: 20),
              child: Row(
                children: [
                  const CircleAvatar(
                    radius: 25,
                    backgroundImage: AssetImage("images/profile1.png"),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(),
                        color: Colors.white,
                      ),
                      child: const Padding(
                        padding: EdgeInsets.only(left: 20),
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "What's on your mind?",
                            hintStyle: TextStyle(color: Colors.black),
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 20),
                  const Icon(
                    Icons.camera_alt,
                    color: Colors.black,
                    size: 30,
                  )
                ],
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 20,
                  bottom: 30,
                  top: 5,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Stories",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 22,
                          ),
                        ),
                        Text("See more    "),
                      ],
                    ),
                    SizedBox(
                      height: 200,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: userInfo.length,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          final user = userInfo[index];
                          return AspectRatio(
                            aspectRatio: 1.6 / 2,
                            child: Container(
                              margin: const EdgeInsets.only(right: 10),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                image: DecorationImage(
                                    image: AssetImage(user.storyImage),
                                    fit: BoxFit.cover),
                              ),
                              child: Container(
                                padding: const EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Container(
                                      height: 40,
                                      width: 40,
                                      decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        border: Border.all(
                                          color: Colors.white,
                                          width: 2,
                                        ),
                                        image: DecorationImage(
                                          image: AssetImage(user.profileImage),
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                    Text(
                                      user.name,
                                      textAlign: TextAlign.center,
                                      style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        color: Colors.white,
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                    const SizedBox(height: 40),
                    for (FacebookUser user in userInfo) userFeed(user)
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget userFeed(FacebookUser user) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20, right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: AssetImage(
                            user.profileImage,
                          ),
                          fit: BoxFit.cover),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        user.name,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                      const SizedBox(width: 10),
                      Text(
                        user.time,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                            fontSize: 15, color: Colors.black45),
                      ),
                    ],
                  )
                ],
              ),
              IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.more_horiz,
                  size: 30,
                  color: Colors.black45,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          Text(
            user.status,
            style: const TextStyle(
              fontSize: 15,
              color: Colors.black87,
            ),
          ),
          const SizedBox(height: 10),
          user.image != ""
              ? Container(
            height: 400,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                  image: AssetImage(user.image), fit: BoxFit.cover),
            ),
          )
              : Container(),
          const SizedBox(height: 10),
          Row(
            children: [
              likeAndLove(Colors.blue, Icons.thumb_up),
              Transform.translate(
                offset: const Offset(-5, 0),
                child: likeAndLove(Colors.red, Icons.favorite),
              ),
              const SizedBox(
                width: 5,
              ),
              Text(
                user.like,
                style: const TextStyle(
                  fontSize: 16,
                ),
              ),
              const Spacer(),
              Text(
                "${user.comment} comment",
                style: const TextStyle(
                  fontSize: 16,
                ),
              ),
              const SizedBox(width: 10),
              const Text(
                "3 Share",
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              likeCommentShare(Icons.thumb_up,
                  user.isOnline == true ? Colors.blue : Colors.grey, "Like"),
              likeCommentShare(Icons.comment, Colors.grey, "Comment"),
              likeCommentShare(Icons.chat, Colors.grey, "Chat"),
            ],
          )
        ],
      ),
    );
  }

  Container likeCommentShare(icon, color, name) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 20,
        vertical: 6,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black12),
        borderRadius: BorderRadius.circular(50),
      ),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 18,
              color: color,
            ),
            const SizedBox(
              width: 5,
            ),
            Text(
              name,
              style: TextStyle(color: color),
            )
          ],
        ),
      ),
    );
  }

  Container likeAndLove(color, icon) {
    return Container(
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white),
      ),
      child: Center(
        child: Icon(
          icon,
          size: 13,
          color: Colors.white,
        ),
      ),
    );
  }
}

Model/model.dart

class FacebookUser {
  String name;
  String image;
  String status;
  String profileImage;
  bool isOnline;
  String like;
  String comment;
  String storyImage;
  String time;

  FacebookUser({
    required this.name,
    required this.comment,
    required this.image,
    required this.isOnline,
    required this.like,
    required this.profileImage,
    required this.status,
    required this.storyImage,
    required this.time,
  });
}

List<FacebookUser> userInfo = [
  FacebookUser(
      name: "Johna Smith",
      image: "images/image1.png",
      status:
      "Roaming far and wide, chasing dreams. Each journey a tale untold, a soul enriched. #Wanderlust #Adventure",
      comment: "111",
      isOnline: true,
      like: "11K",
      time: "12 min ago",
      profileImage: "images/profile5.png",
      storyImage: "images/story1.png"),

  FacebookUser(
      name: "Maria Garcia",
      image: "images/image2.png",
      time: "2 h ago",
      status:"",
      //"Style is my language, expressing who I am. Confidence sewn into every stitch. #FashionForward #ExpressYourself",
      comment: "200",
      isOnline: true,
      like: "20.5K",
      profileImage: "images/profile3.png",
      storyImage: "images/image3.png"),
  FacebookUser(
      name: "Mohammad Ali",
      image: "images/image8.png",
      time: "1 day ago",
      status:
      "Exploring new horizons, discovering wonders. Memories made, hearts touched. #TravelDiaries #Discover",
      comment: "2",
      isOnline: false,
      like: "20",
      profileImage: "images/profile1.png",
      storyImage: "images/story2.png"),
  FacebookUser(
      name: "Anna Johnson",
      time: "22 hr ago",
      image: "",
      status:
      "Life's a game; play it well. Laughter echoes, joy multiplies. Let's have some fun! #PlayfulSpirit #JoyfulLiving",
      comment: "20",
      isOnline: true,
      like: "2K",
      profileImage: "images/profile2.png",
      storyImage: "images/story3.png"),
  FacebookUser(
      name: "Chen Wei",
      time: "2 week ago",
      image: "images/story2.png",
      status:
      "In quiet moments, find serenity. Stillness speaks, wisdom whispers. Peace within, tranquility embraced. #InnerPeace #Mindfulness",
      comment: "1k",
      isOnline: false,
      like: "100K",
      profileImage: "images/profile4.png",
      storyImage: "images/image1.png"),
];